<template>
	<view class="page">
		<view class="prize_cont">
			<view class="c-title">中奖份数：{{prize_num}}份</view>
			<view class="li" v-for="(item,index) in data" :key="index">
				<image class="pic" :src="item.thumb"></image>
				<view class="info">
					<view class="name">{{item.goods_name}}</view>
					<view class="count">x{{item.prize_num}}</view>
				</view>
			</view>
		</view>
		<navigator open-type="navigate" url="/pages/user/settings/address/address?type=lottery" class="address_cont flex f-a-center">
			<text>选择收货地址</text>
			<arrow class="arrow" size="36" color="#999999" direction="right"></arrow>
		</navigator>
		<view v-if="address_id != 0" class="m-address-info-l">
		    <view class="m-address-info-t">
		        <view class="u-address-name">{{addressData.realname||''}}</view>
		        <view class="u-address-mobile">{{addressData.mobile||''}}</view>
		    </view>
		    <view class="u-address-content">{{addressData.province_text+addressData.city_text+addressData.zone_text+addressData.address||''}}</view>
		</view>
		<view class="take-btn" @tap="takeBtn">领取</view>
		<view class="m-loading" v-if="showLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
			<text>加载中</text>
		</view>
	</view>
</template>

<script>
	import henglang from '@/common/common.js';
	export default {
	    data() {
	        return {
	            data:[],
				page:1,
				total_pages:1,
				showLoading: false,
				prize_num:1,
				address_id:0,
				addressData:[],
				loadData: {}
	        }
	    },
		methods:{
			getaddress(){
				let that = this
				henglang.get('member/address_view',{id: that.address_id},true,function(res){
					that.addressData = res.data.data;
				});
			},
			takeBtn(){
				let that = this
				let postdata = {
					oid:that.loadData.oid,
					addr_id:that.address_id
				}
				if(postdata.addr_id == 0){
					henglang.showToast('请选择收货地址')
				}else{
					henglang.post('disc/deliverGoods',postdata,true,function(res){
						that.showLoading = false
						henglang.showToast(res.data.msg,1500)
						if(res.data.code == 0){
							uni.removeStorageSync('address_id')
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}
					})
				}
			}
		},
		onLoad(option) {
			let that = this
			that.loadData = option
			that.prize_num = option.prize_num
			that.showLoading = true
			henglang.post('disc/goodsList',{oid:that.loadData.oid},true,function(res){
				that.showLoading = false
				that.data = res.data.data
			})
			uni.removeStorageSync('address_id')
		},
		onShow() {
			this.address_id = uni.getStorageSync('address_id')?uni.getStorageSync('address_id'):0
			this.getaddress()
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #FFFFFF;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.prize_cont{
		.c-title{
			font-size: 28rpx;
			padding: 10px;
			border-bottom: 1px solid #E0E0E0;
		}
		.li{
			display: flex;
			align-items: flex-start;
			padding: 0 10px;
			margin-top: 30rpx;
			.pic{
				width: 160rpx;
				height: 160rpx;
				border-radius: 5px;
			}
			.info{
				flex: 1;
				position: relative;
				margin-left: 20rpx;
				height: 160rpx;
				.name{
					width: 100%;
					line-height: 44rpx;
				}
				.count{
					position: absolute;
					bottom: 0;
					right: 0;
				}
				.number-box{
					position: absolute;
					bottom: 0;
					right: 0;
					.btn{
						position: relative;
						width: 40rpx;
						height: 40rpx;
						background-color: #D71311;
						border-radius: 50px;
						position: relative;
						&::after{
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
							width: 10px;
							height: 2px;
							background-color: #FFFFFF;
						}
						&.plus::before{
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
							width: 2px;
							height: 10px;
							background-color: #FFFFFF;
						}
						&.gay{
							background-color: #999999;
						}
					}
					.num{
						width: 60rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}
			
		}
	}
	.address_cont{
		justify-content: space-between;
		border-top: 1px solid #E0E0E0;
		border-bottom: 1px solid #E0E0E0;
		margin-top: 50rpx;
		padding-right: 20rpx;
		text{
			font-size: 28rpx;
			padding: 10px;
		}
		
	}
	.m-address-info-l{
		background-image: url(../../static/icons/jewel/addr_bg.png);
		background-position: left bottom;
		background-repeat: no-repeat;
		padding: 15px 10px;
	}
	.m-address-info-t{
	    display: flex;
	    align-items: center;
	    font-size: 32upx;
		justify-content: space-between;
	}
	.u-address-name,.u-address-mobile{
	    margin-right: 20rpx;
	}
	.u-address-content{
	    font-size: 29upx;
	    color: #5f5f5f;
		margin-top: 20rpx;
	}
	.take-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		line-height: 100rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #D71311;
		font-size: 32rpx;
	}
	.take-btn-bg{
		background-color: #FFFFFF;
		width: 100%;
		height: 100rpx;
	}
</style>
